<template>
  <div class="purchaseProcessingCenterView">
    <div class="cardview">
      <div slot="header">
        <div class="headerView">
          <el-button type="primary" @click="bannerVisible = true">添加</el-button>
        </div>
      </div>
      <div class="cardview-body">
        <div class="cardview-body-table">
          <el-table :data="bannersList" size="small" border fit
			        highlight-current-row>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column label="图片缩放图">
              <template slot-scope="scope">
                <img :src="scope.row.imgUrl" class="cardview-body-table-img" alt srcset />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.isDel == 1" @click="switchchange(scope.row,2)">显示</el-button>
                <el-button type="danger" v-if="scope.row.isDel == 2" @click="switchchange(scope.row,1)">隐藏</el-button>
                <el-button type="success" @click="swipperListInfo(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="cardview-body-changepage">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageQuery.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="allCount"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 修改轮播图 -->
    <el-dialog
      title="修改轮播图"
      append-to-body
      :visible.sync="editbannerVisible"
      :before-close="editbannerVisiblehandleClose"
    >
      <div class="bannerVisibleView" v-if="swipperInfo">
        <div class="bannerVisibleView-list">
          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">轮播图备注:</div>
            <div class="bannerVisibleView-info-right">
              <el-input v-model="swipperInfo.name" placeholder="请输入内容"></el-input>
            </div>
          </div>

          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">轮播图:</div>
            <div class="bannerVisibleView-info-right">
              <el-image fit="scale-down;" style="width: 300px" :src="swipperInfo.imgUrl"></el-image>
            </div>
          </div>

          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">更改轮播图:</div>
            <div class="bannerVisibleView-info-right">
              <el-upload
                :limit="99"
                class="avatar-uploader"
                action="http://139.155.89.213:8312/api/oss/photoupload"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeupload"
              >
                <el-button size="small" type="primary" :loading="uploadloading">点击上传</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <span slot="footer" class="bannerVisibleView-footer">
          <div class="bannerVisibleView-footer1"></div>
          <div class="bannerVisibleView-footer2">
            <el-button @click="editbannerVisiblehandleClose">取 消</el-button>
            <el-button type="primary" @click="editSwipper">更改轮播图</el-button>
          </div>
        </span>
      </div>
    </el-dialog>



    <el-dialog
      title="添加轮播图"
      append-to-body
      :visible.sync="bannerVisible"
      :before-close="bannerVisiblehandleClose"
    >
      <div class="bannerVisibleView" v-if="bannerinfo">
        <div class="bannerVisibleView-list">
          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">轮播图备注:</div>
            <div class="bannerVisibleView-info-right">
              <el-input v-model="bannerinfo.name" placeholder="请输入内容"></el-input>
            </div>
          </div>

          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">轮播图:</div>
            <div class="bannerVisibleView-info-right">
              <el-image fit="scale-down;" style="width: 300px" :src="bannerinfo.imgUrl"></el-image>
            </div>
          </div>

          <div class="bannerVisibleView-info">
            <div class="bannerVisibleView-info-left">更改轮播图:</div>
            <div class="bannerVisibleView-info-right">
              <el-upload
                :limit="99"
                class="avatar-uploader"
                action="http://139.155.89.213:8312/api/oss/photoupload"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeupload"
              >
                <el-button size="small" type="primary" :loading="uploadloading">点击上传</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <span slot="footer" class="bannerVisibleView-footer">
          <div class="bannerVisibleView-footer1"></div>
          <div class="bannerVisibleView-footer2">
            <el-button @click="bannerVisiblehandleClose">取 消</el-button>
            <el-button type="primary" @click="newSwipper">添加轮播图</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {
  selectBannerCondition,
  insertBanner,
  updateBannerIsDelById,
  selectBannerById,
  updateBannerById
} from "../../../api/swipperimg";
export default {
  data() {
    return {
      bannerVisible: false, //轮播图显示
      editbannerVisible:false,//修改轮播图显示
      bannerinfo: {
        name: null,
        imgUrl: null,
        ht5Url: "zz",
        isDel: 1,
      }, //选取的轮播图详情
      swipperInfo:null,//单个轮播图详情
      bannersList: null, //轮播图数据
      uploadloading: false, //上传图片loading
      allCount: null,
      headers: {
        token: 6666,
      },
      pageQuery: {
        startTime: null,
        endTime: null,
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    //获取轮播图信息
    getdata() {
      selectBannerCondition(this.pageQuery).then((res) => {
        if (res.code == 200) {
          this.bannersList = res.data.selectBannerCondition;
          this.allCount = res.data.allCount;
        }
      });
    },
    //获取单个轮播图
    swipperListInfo(e){
      let a = {
        id : e.id
      }
      selectBannerById(a).then((res)=>{
        if(res.code == 200){
          this.swipperInfo = res.data
          this.editbannerVisible = true
        }
      })
    },
    //添加轮播图
    newSwipper() {
      if (!this.bannerinfo.name) {
        this.$message({
          message: "请输入轮播图名称",
          type: "warning",
        });
        return;
      }
      if (!this.bannerinfo.imgUrl) {
        this.$message({
          message: "请上传轮播图",
          type: "warning",
        });
        return;
      }
      insertBanner(this.bannerinfo).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          this.bannerVisiblehandleClose();
        }
      });
    },
    //更改轮播图
    editSwipper(){
      updateBannerById(this.swipperInfo).then((res)=>{
        if(res.code == 200){
           this.$message({
            message: "修改成功",
            type: "success",
          });
          this.editbannerVisiblehandleClose()
        }
      })
    },
    //控制是否显示
    switchchange(e, q) {
      console.log("eeeee", e);
      let a = {
        id: e.id,
        isDel: q,
      };
      updateBannerIsDelById(a).then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < this.bannersList.length; i++) {
            if (e.id == this.bannersList[i].id) {
              this.bannersList[i].isDel = q;
            }
          }
        } else {
          for (let i = 0; i < this.bannersList.length; i++) {
            if (e.id == this.bannersList[i].id) {
              if (q == 1) {
                this.bannersList[i].isDel = 2;
              }
              if (q == 2) {
                this.bannersList[i].isDel = 2;
              }
            }
          }
        }
      });
    },
    //显示控制
    reisDel(e) {
      if (e == 1) {
        return true;
      } else {
        return false;
      }
    },
    //关闭dialog逻辑
    bannerVisiblehandleClose() {
      this.bannerinfo = null;
      this.bannerVisible = false;
      this.getdata();
    },
    editbannerVisiblehandleClose(){
      this.swipperInfo = null;
      this.editbannerVisible = false;
      this.getdata();
    },
    //上传完成逻辑
    handleAvatarSuccess1(res, file) {
      let _vm = this;
      this.uploadloading = false;
      this.bannerinfo.imgUrl = res.data.photos;
    },
    handleAvatarSuccess2(res, file) {
      let _vm = this;
      this.uploadloading = false;
      this.swipperInfo.imgUrl = res.data.photos;
    },
    beforeupload(res) {
      this.uploadloading = true;
    },
    //页面跳转
    handleSizeChange(val) {
      this.pageQuery.pageSize = val;
      this.getdata();
    },
    //规格跳转
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val;
      this.getdata();
    },
  },
};
</script>


<style lang="less" scoped>
.purchaseProcessingCenterView {
  // padding: 20px;
  // overflow: auto;
  // height: 83%;

  .headerText {
    font-size: 25px;
    font-weight: bold;
  }

  .cardview {
    .headerView {
      display: flex;
      align-items: center;
      .headerView-left {
        flex: 1;
      }
      .headerView-right {
        flex: 1;
        text-align: right;
      }
    }

    .cardview-body-table {
      padding: 20px 0 0 0;

      .cardview-body-table-title {
        font-size: 20px;
        font-weight: bold;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
      }

      .cardview-body-table-img {
        width: 100px;
        height: 100px;
      }
    }

    .cardview-body-changepage {
      padding: 30px 20px 0 0;
      text-align: right;
    }
  }
}

.bannerVisibleView {
  .bannerVisibleView-list {
    margin: 20px;
    .bannerVisibleView-info {
      display: flex;
      align-items: center;
      margin: 20px 0;
      .bannerVisibleView-info-left {
        flex: 1;
      }

      .bannerVisibleView-info-right {
        flex: 5;
      }
    }
  }

  .bannerVisibleView-footer {
    text-align: right;
    padding: 20px;

    .bannerVisibleView-footer1 {
      flex: 1;
    }

    .bannerVisibleView-footer2 {
      flex: 1;
      margin-right: 20px;
    }
  }
}
</style>
